<template>
<div class="express-form-out" :style="{'padding-bottom': show ? '150px' : 0}">
  <k-form :model="model" :rules="rules" ref="form" style="margin-bottom: 12px">
    <k-form-item prop="name" :errorValid="nameError">
      <k-form-item-input type="text" v-model="model.name" max-length="18" placeholder="姓名" />
    </k-form-item>
    <k-form-item prop="mobile" :errorValid="mobileError">
      <k-form-item-input type="number" v-model.number="model.mobile" max-length="11" placeholder="手机号码" @change="handleMobileChange" @blur="handleMobileBlur" />
    </k-form-item>
    <k-form-item prop="code" :errorValid="codeError">
      <k-form-item-input type="text" v-model="model.code" placeholder="验证码" showCode :codeDisabled="codeDisabled" :codeRetry="codeRetry" :text="text" @change="setMobileError" @getCode="getCode(model.mobile)" />
    </k-form-item>
    <k-form-item prop="citys">
      <picker v-model="model.citys" :data="address" @on-hide="show = false" @on-show="pickerShow" />
    </k-form-item>
    <k-form-item prop="address" :errorValid="addressError">
      <k-form-item-input type="text" v-model="model.address" placeholder="详细地址" />
    </k-form-item>
  </k-form>
  <k-button style="margin-top: 12px" :loading="loading" @click="submit">确认</k-button>
</div>
</template>
<script>
import KForm from '@/components/Form'
import KFormItem from '@/components/FormItem'
import KFormItemInput from '@/components/FormItemInput'
import KButton from '@/components/Button'
import Picker from '@/components/Picker'
import FastClick from 'fastclick'
import chinaAddress from "@/datas/china_address.json";
import {
  mobileMixin,
  codeMixin,
  nameMixin,
  addressMixin,
  toolsMixin,
  mixin
} from "@/mixin";
import utils from '@/utils'
import * as Api from '@/service';
export default {
  components: {
    KForm,
    KFormItem,
    KButton,
    KFormItemInput,
    Picker
  },
  mixins: [mobileMixin, codeMixin, nameMixin, addressMixin, toolsMixin, mixin],
  data() {
    return {
      model: {
        name: "",
        mobile: "",
        code: "",
        citys: [],
        address: '',
        orderType: "1",
        type: 0
      },
      address: chinaAddress,
      show: false,
      loading: false,
      rules: {
        name: {
          required: true,
          message: "请填写姓名"
        },
        mobile: {
          required: true,
          message: "请填写手机号码"
        },
        code: {
          required: true,
          message: "请填写验证码"
        },
        citys: {
          required: true,
          message: "请选择省/市",
          type: "array"
        },
        address: {
          required: true,
          message: "请填写详细地址"
        }
      }
    };
  },
  mounted() {
    FastClick.attach(document.querySelector('.express-form-out'))
    this.getCrmUser()
  },
  methods: {
    pickerShow() {
      this.show = true;
      this.$nextTick(() => {
        window.scrollTo(0, 500);
      });
    },
    formatData() {
      let {
        name,
        mobile,
        code: authCode,
        address,
        type,
        orderType,
        openId
      } = this.model;
      const [provice] = this.address.filter(
        item => item.value == this.model.citys[0]
      );
      const [city] = this.address.filter(
        item => item.value == this.model.citys[1]
      );
      const channel = utils.queryString().channel ?
        utils.queryString().channel :
        "other";
      address = `${provice.name} ${city.name} ${address}`;
      type = (channel === 'CRM' || channel === 'SMS') ? '1' : '0'
      let model = {
        name,
        mobile,
        authCode,
        address,
        channel,
        type,
        orderType,
        sampling: '香奈儿智慧紧肤植物精萃乳霜 体验装(5ml)',
        openId
      }
      return model;
    },
  }
};
</script>
<style lang="less" scoped="">
.express-form-out {}
</style>
